<template>
	<div id="rightBarbody">
		<div class="rightBarItem">
			<div class="rtitle">赞赏区</div>
			<div id="showpic">
				<img src="../assets/rightbar/wechat1.jpg"/>
				<div>微信赞赏码</div>
			</div>
		</div>
		<div class="rightBarItem">
			<div class="rtitle">链接区</div>
			<div class="showlink" v-for="(item,index) in linklists" :key = "index">
				<div class="link">
					<img :src="item.img"/>
					<a :href="item.address" target="_blank">{{item.name}}</a>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import config from '../../config.js'
	export default {
	  name: 'rightBar',
	  props: {
		msg: String
	  },
	  data() {
		return {
			linklists:config.linklists
		}
	  },
	  methods:{
		  
	  }
	}

</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.rightBarItem{
		background-color: #e2e1e4;
		margin-left: 20px;
		border-radius: 0.625rem;
		margin-bottom: 0.625rem;
	}
	.rightBarItem div{
		color: #000000;
		text-align: center;
	}
	.rightBarItem .rtitle{
		margin-bottom: 1rem;
		font-weight: bold;
	}
	.rightBarItem .showlink .link{
		display: flex;
		flex-direction: row;
		line-height: 1.875rem;
		margin-left: 10%;
		margin-bottom: 1rem;
	}
	.rightBarItem .showlink .link img{
		width: 1.875rem;
		height: 1.875rem;
		margin-right: 5%;
	}
	#rightBarbody #showpic{
		display: flex;
		flex-direction: column;
		width: inherit;
		flex-wrap: wrap;
	}
	#rightBarbody #showpic img{
		width: 80%;
		margin: 0 auto;
	}
	@media screen and (max-width:980px ) {
	 #rightBarbody{
		 display: none;
	 }
	}
</style>
